<template>
<VBtn
    icon="tabler-arrow-left"
    variant="text"
    color="primary"
    @click="router.back()"
  />
  <section>
    <v-skeleton-loader
          class="mx-auto border"
          style="display: block;"
          type="image, article,table"
          :loading="loading"
        >
        <VRow v-if="galleryInfo">
            <VCol
            cols="12"
            >
            <VCard>
                <VCardItem
                title="素材详情"
                class="pb-6"
                >
                <template #append>
                    <div class="d-flex gap-4 align-center">
                    <v-hover>
                      <template v-slot:default="{ isHovering, props }">
                      <VIcon
                          v-bind="props"
                          size="24"
                          class="cursor-pointer"
                          :icon="isHovering||galleryInfo.collect ? 'tabler-heart-filled' : 'tabler-heart'"
                          @click="handleCollect(galleryInfo)"
                      />
                      <VIcon
                          size="24"
                          class="cursor-pointer"
                          icon="tabler-share"
                      />
                      </template>
                      </v-hover>
                    </div>
                </template>
                </VCardItem>
                <VCardText>
                <VCard
                    flat
                    border
                >
                    <div class="px-2 pt-2">
                    <VRow v-viewer>
                        <VCol
                        cols="12"
                        md="4"
                        >
                          <v-lazy @update:modelValue="loadElementImg(galleryInfo, 'mall')">
                            <VImg :src="pages1"/>
                          </v-lazy>
                        </VCol>

                        <VCol
                        cols="12"
                        md="8"
                        align-self="center"
                        >
                        <VDivider class="my-6" />
                        <div class="d-flex align-center gap-x-4">
                          <h3 class="text-h3 mb-4">
                              {{ galleryInfo?.title }} 
                          </h3>
                          </div>
                          <div class="d-flex align-center gap-x-4">
                          <h5 class="text-h5 mb-4">
                              作者: {{ galleryInfo?.author.name }} 
                          </h5>
                        </div>
                        <div class="d-flex align-center gap-x-4">
                          <h5 class="text-h5 mb-10">
                              价格: {{ galleryInfo?.price }} 
                          </h5>
                        </div>
                        <div class="d-flex align-center gap-x-4">
                          <VBtn size="large" @click="handleOrder()" color="warning" 
                          :loading="loading" :disabled="galleryInfo.purchased">{{galleryInfo.purchased?'已购买':'购买'}}</VBtn>
                        </div>
                        <VDivider class="my-6" />
                        </VCol>
                    </VRow>
                    </div>
                    <VCardText>
                    <VDivider class="my-6" />
                    <h5 class="text-h5 mb-4">
                        素材描述
                    </h5>
                    <!-- eslint-disable-next-line vue/no-v-html -->
                    <div v-html="galleryInfo?.description" />
                    
                    
                    </VCardText>
                </VCard>
                </VCardText>
            </VCard>
            </VCol>
        </VRow>
        </v-skeleton-loader>
</section>

<section v-if="!loading&&!galleryInfo">
      <v-empty-state
        action-text="返回"
        icon="tabler-search"
        text="您的连接或我们的服务器可能存在问题。请检查您的互联网连接或稍后重试。感谢您的耐心等待。"
        headline="出了点问题"
        title="请稍后重新尝试"
        @click:action="router.back()"
      ></v-empty-state>
  </section>
</template>


<script setup lang="ts">
import { getGalleryMall,collectGallery,cancelCollectGallery } from "@/api/gallery";
import { addOrder } from "@/api/order";
import { useRoute,useRouter } from "vue-router";
import { computed } from 'vue';
import pages1 from '@images/pages/1.png'
import * as Utils from "@/utils/index";

const {proxy} = getCurrentInstance()


const tenantId = localStorage.getItem('tenantId')

async function loadElementImg(item, type) {
  Utils.loadElementImg(item, type)
}

const handleCollect = async () => {
  if (galleryInfo.value.collect) {
    await cancelCollectGallery({
      galleryIds: [galleryInfo.value.galleryId]
    })
    galleryInfo.value.collect = false
    proxy.$toast.success('取消收藏成功')
  } else {
    await collectGallery({
      galleryId: galleryInfo.value.galleryId
    })
    galleryInfo.value.collect = true
    proxy.$toast.success('收藏成功')
  }
}


const handleOrder = async () => {
  loading.value = true
  await addOrder({
    galleryId: galleryInfo.value.galleryId,
  }).finally(()=>loading.value = false)

}

const route = useRoute();
const router = useRouter()

const loading = ref(false)

const mallId = computed({
  get: () => route.params.id,
  set: () => route.params.id,
})

const galleryInfo = ref()

const getInfo = async() => {
    loading.value = true
    const res =await getGalleryMall(mallId.value).finally(() => loading.value = false)
    galleryInfo.value = res.data
}

getInfo()

const step = ref(1)

</script>

<style lang="scss" scoped>
  .drop-zone {
    border: 2px dashed rgba(var(--v-theme-on-surface), 0.12);
    border-radius: 6px;
  }
</style>

<style lang="scss" scoped>
.course-content {
  position: sticky;
  inset-block: 4rem 0;
}

.card-list {
  --v-card-list-gap: 16px;
}
</style>

<style lang="scss">
@use "@layouts/styles/mixins" as layoutsMixins;

body .v-layout .v-application__wrap {
  .course-content {
    .v-expansion-panels {
      border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
      border-radius: 6px;

      .v-expansion-panel {
        &--active {
          .v-expansion-panel-title--active {
            border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));

            .v-expansion-panel-title__overlay {
              opacity: var(--v-hover-opacity) !important;
            }
          }
        }

        .v-expansion-panel-title {
          .v-expansion-panel-title__overlay {
            background-color: rgba(var(--v-theme-on-surface));
            opacity: var(--v-hover-opacity) !important;
          }

          &:hover {
            .v-expansion-panel-title__overlay {
              opacity: var(--v-hover-opacity) !important;
            }
          }

          &__icon {
            .v-icon {
              block-size: 1.5rem !important;
              color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
              font-size: 1.5rem !important;
              inline-size: 1.5rem !important;

              @include layoutsMixins.rtl {
                transform: scaleX(-1);
              }
            }
          }
        }

        .v-expansion-panel-text {
          &__wrapper {
            padding-block: 1rem;
            padding-inline: 0.75rem;
          }
        }
      }
    }
  }

  .card-list {
    .v-list-item__prepend {
      .v-list-item__spacer {
        inline-size: 8px !important;
      }
    }
  }
}
</style>
